<template>
  <div class="container with-nav-padding">
    <div class="user-info" :style="{background: mainColor}">
      <!-- <div @click="$router.push('/msg-center')" class="top-icon">
        <div class="icon-dot"></div>
        <img src="@/assets/个人中心-assets/icon.png" alt="" />
      </div>-->
      <div class="user">
        <div class="avatar">
          <img :src="profileInfo.avatar" alt />
        </div>
        <div class="info">
          <div class="username">
            <span class="name">{{ profileInfo.nickname }}</span>
            <!-- <span class="vip-status">{{ profileInfo.name }}</span>
            <span
              v-if="profileInfo.agent"
              class="vip-status"
              style="margin-left:0.2rem;"
              >{{ profileInfo.agent === 1 ? "社区代理" : "区县代理" }}</span
            >-->
          </div>
          <div class="other-info">
            <!-- <span v-if="profileInfo.stop_at" class="expire"
              >有效期至{{ profileInfo.stop_at.split(" ")[0] }}</span
            >-->
            <span class="invite">邀请码：{{ profileInfo.invite_code }}</span>
            <span
              class="copy copyOrderSn"
              data-clipboard-action="copy"
              :data-clipboard-text="profileInfo.invite_code"
              @click="copyLink"
            >复制</span>
            <div>
              <span style="margin-top:0.24rem; ">我的邀请人:{{ profileInfo.invite_name }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="account-info">
        <!-- <div class="divider"></div>
        <div class="divider d2"></div>-->
        <div class="divider d3"></div>
        <div class="info-cell d-flex" style="width:66%;padding-left:1.8rem;">
          <!-- <span class="vip-status">{{ profileInfo.name }}</span -->
          <!-- <span
            v-if="profileInfo.agent"
            class="vip-status"
            style="margin-left:0.5rem;"
            >{{ profileInfo.agent === 1 ? "社区代理" : "区县代理" }}</span
          >-->
          <div class="cell-list d-flex flex-1" style="width: 100%">
            <div
              @click="toUserHome"
              class="cell-item"
              style="padding-right: 1rem;border-right: 0.04rem solid rgba(255, 255, 255, 0.2);"
            >
              <p>{{profileInfo.dynamic_sum}}</p>
              <p>视频</p>
            </div>
            <div
              @click="toUserHome"
              class="cell-item"
              style="padding-right: 1rem;border-right: 0.04rem solid rgba(255, 255, 255, 0.2);"
            >
              <p>{{profileInfo.concern_sum}}</p>
              <p>关注</p>
            </div>
            <div @click="toUserHome" class="cell-item">
              <p>{{profileInfo.fans}}</p>
              <p>粉丝</p>
            </div>
          </div>
        </div>
        <div @click="$router.push('/profile-edit')" class="info-cell">
          <div style="margin-top:0.15rem;" class="text">编辑资料</div>
        </div>
      </div>
    </div>
    <div class="represent" style="text-align:center;margin: 0.48rem 0">
      <router-link to="/represent">
        <img src="@/assets/represent/tiyan.png" alt />
      </router-link>
    </div>
    <div class="order" v-if="shop_set.server">
      <div class="title with-grey-bottom-border" @click="orderTitleClick">
        <div class="title-text" v-if="isNeedServe && isByServe">服务订单</div>
        <div class="title-text" v-if="isNeedGoods && isByGoods">商品订单</div>
        <div class="title-ex-text">全部订单 ></div>
      </div>
      <div v-if="Object.keys(profileInfo).length > 0" class="order-type">
        <div @click="waitPayment" class="order-btn">
          <img src="@/assets/个人中心-assets/付款.png" alt />
          <div class="order-text">待付款</div>
          <!-- <div class="badge">{{ profileInfo.order.payment }}</div> -->
        </div>
        <div @click="waitServe" class="order-btn">
          <img src="@/assets/个人中心-assets/02包裹、发货.png" alt />
          <div class="order-text" v-if="isNeedServe && isByServe">待服务</div>
          <div class="order-text" v-if="isNeedGoods && isByGoods">待发货</div>
          <!-- <div class="badge">{{ profileInfo.order.drop }}</div> -->
        </div>
        <div @click="alreadyDistribute" class="order-btn">
          <img src="@/assets/个人中心-assets/收货信息.png" alt />
          <div class="order-text" v-if="isNeedServe && isByServe">已派单</div>
          <div class="order-text" v-if="isNeedGoods && isByGoods">待收货</div>
          <!-- <div class="badge">{{ profileInfo.order.take }}</div> -->
        </div>
        <div @click="waitComment" class="order-btn">
          <img src="@/assets/个人中心-assets/评价.png" alt />
          <div class="order-text">待评价</div>
          <!-- <div class="badge">{{ profileInfo.order.evaluate }}</div> -->
        </div>
        <div class="order-btn">
          <img @click="refund" src="@/assets/个人中心-assets/售后服务-自动评价.png" alt />
          <div class="order-text">退款</div>
          <!-- <div class="badge">{{ profileInfo.order.after }}</div> -->
        </div>
      </div>
    </div>
    <!-- <div @click="$router.push('/user-point')" class="score-panel">
      <div class="score">{{ userPoints.split(".")[0] }}</div>
      <div class="text">当前积分</div>
    </div>-->

    <div class="user-menu-list">
      <div class="user-menu with-grey-bottom-border" @click="toMyRepresentOrder">
        <div class="menu-text">我的代言</div>
        <div class="icon"></div>
      </div>
      <div class="user-menu with-grey-bottom-border" @click="myExclusive">
        <div class="menu-text">专属二维码</div>
        <div class="icon"></div>
      </div>
      <div class="with-grey-bottom-border" @click="subOrder">
        <div v-if="isNeedGoods && !isByGoods" class="user-menu">
          <div class="menu-text">商品订单</div>
          <div class="icon"></div>
        </div>
        <div v-if="isNeedServe && !isByServe" class="user-menu">
          <div class="menu-text">服务订单</div>
          <div class="icon"></div>
        </div>
      </div>
      <div
        class="user-menu with-grey-bottom-border"
        @click="$router.push('/represent-orders?orderStatus=0&goodsType=represent')"
      >
        <div class="menu-text">代言订单</div>
        <div class="icon"></div>
      </div>
      <div class="user-menu with-grey-bottom-border" @click="$router.push('/my-favorite')">
        <div class="menu-text">我的收藏</div>
        <div class="icon"></div>
      </div>
      <!-- <div
        class="user-menu with-grey-bottom-border"
        @click="
          $router.push({
            path: '/user-page',
            query: { user_id: profileInfo.id }
          })
        "
      >
        <div class="menu-text">我的动态</div>
        <div class="icon"></div>
      </div>-->
      <div class="user-menu with-grey-bottom-border" @click="$router.push('/user-coupon')">
        <div class="menu-text">我的优惠券</div>
        <div class="icon"></div>
      </div>
      <div class="user-menu with-grey-bottom-border" @click="$router.push('/addr-mng')">
        <div class="menu-text">地址管理</div>
        <div class="icon"></div>
      </div>
      <a :href="'tel:' + service_tel">
        <div class="user-menu">
          <div class="menu-text">联系客服</div>
          <div class="icon"></div>
        </div>
      </a>
    </div>
    <!-- <img
      @click="$router.push('/vip-invite')"
      class="ad"
      src="@/assets/kll/gg.png"
      alt=""
    />-->
    <div @click="logout" class="logout" :style="{color: mainColor}">退出登录</div>
  </div>
</template>

<script>
import { setToken, getToken } from "@/utils/utils";
import clipboardJs from "clipboard";
import { getProfileInfo, getUserPoint, getAppInfo } from "@/api/profile";
import { mapState, mapMutations } from "vuex";
import wx from "weixin-js-sdk";
export default {
  data() {
    return {
      inviteCode: 1254,
      profileInfo: {},
      userPoints: "0",
      isNeedServe: "",
      isByServe: "",
      isNeedGoods: "",
      isByGoods: ""
    };
  },
  computed: {
    ...mapState({
      service_tel: state => state.app.service_tel,
      mainColor: state => state.app.mainColor,
      subColor: state => state.app.subColor,
      shop_set: state => state.app.shop_set
    })
  },
  watch: {
    shop_set(newVal) {
      console.log(newVal);
      this.isNeedServe = newVal.server.server;
      this.isByServe = newVal.server.is_show;
      this.isNeedGoods = newVal.shop.shop;
      this.isByGoods = newVal.shop.is_show;
    }
  },
  methods: {
    myExclusive() {
      let me = this;
      let token = getToken();
      if (token) {
        wx.miniProgram.getEnv(res => {
          if (res.miniprogram) {
            wx.miniProgram.navigateTo({
              url: `/pages/my-qrcode/my-qrcode?token=${token}`
            });
          } else {
            me.$router.push("/my-qrcode");
          }
        });
      }
    },
    toUserHome() {
      this.$router.push({
        path: "/user-page",
        query: { user_id: this.profileInfo.id }
      });
    },
    ...mapMutations(["setAppInfo"]),
    subOrder() {
      if (this.isNeedGoods && !this.isByGoods) {
        this.$router.push({ path: "/orders", query: { is_serve: "0" } });
      } else if (this.isNeedServe && !this.isByServe) {
        this.$router.push({ path: "/orders", query: { is_serve: "1" } });
      }
    },
    refund() {
      if (this.isNeedServe && this.isByServe) {
        this.$router.push({
          path: "/orders",
          query: { is_serve: 1 }
        });
      } else if (this.isNeedGoods && this.isByGoods) {
        this.$router.push({
          path: "/orders",
          query: { is_serve: "0" }
        });
      }
    },
    waitComment() {
      if (this.isNeedServe && this.isByServe) {
        this.$router.push({
          path: "/orders",
          query: { orderStatus: 5, is_serve: 1 }
        });
      } else if (this.isNeedGoods && this.isByGoods) {
        this.$router.push({
          path: "/orders",
          query: { orderStatus: 5, is_serve: "0" }
        });
      }
    },
    alreadyDistribute() {
      if (this.isNeedServe && this.isByServe) {
        this.$router.push({
          path: "/orders",
          query: { orderStatus: 4, is_serve: 1 }
        });
      } else if (this.isNeedGoods && this.isByGoods) {
        this.$router.push({
          path: "/orders",
          query: { orderStatus: 4, is_serve: "0" }
        });
      }
    },
    waitServe() {
      if (this.isNeedServe && this.isByServe) {
        this.$router.push({
          path: "/orders",
          query: { orderStatus: 3, is_serve: 1 }
        });
      } else if (this.isNeedGoods && this.isByGoods) {
        this.$router.push({
          path: "/orders",
          query: { orderStatus: 3, is_serve: "0" }
        });
      }
    },
    waitPayment() {
      if (this.isNeedServe && this.isByServe) {
        this.$router.push({
          path: "/orders",
          query: { orderStatus: 2, is_serve: 1 }
        });
      } else if (this.isNeedGoods && this.isByGoods) {
        this.$router.push({
          path: "/orders",
          query: { orderStatus: 2, is_serve: "0" }
        });
      }
    },
    orderTitleClick() {
      if (this.isNeedServe && this.isByServe) {
        this.$router.push("/orders");
      } else if (this.isNeedGoods && this.isByGoods) {
        this.$router.push({ path: "/orders", query: { is_serve: "0" } });
      }
    },
    toMyRepresentOrder() {
      this.$router.push({
        path: "/my-represent-orders",
        query: {
          orderStatus: 2
        }
      });
    },
    logout() {
      setToken("");
      this.$dialog.toast({
        mes: "注销成功",
        timeout: 1000,
        icon: "success"
      });
      this.$router.push("/login");
    },
    copyLink() {
      let _this = this;
      let clipboard = new clipboardJs(".copyOrderSn");
      clipboard.on("success", function() {
        _this.$dialog.toast({
          mes: "复制成功",
          timeout: 1000,
          icon: "success"
        });
      });
      clipboard.on("error", function() {
        _this.$dialog.toast({
          mes: "复制失败",
          timeout: 1000,
          icon: "error"
        });
      });
    }
  },
  created() {
    getProfileInfo().then(res => {
      if (res.status === 200) {
        // console.log(res);
        this.profileInfo = res.data.data;
      }
    });
    getUserPoint().then(res => {
      if (res.status === 200) {
        this.userPoints = res.data.data.points;
      }
    });
    getAppInfo().then(res => {
      if (res.status === 200) {
        this.setAppInfo(res.data.data);
      }
    });
  }
};
</script>

<style lang="less" scoped>
.container {
  .user-info {
    color: #f5f5f5;
    height: 6rem;
    background-color: rgb(6, 120, 255);
    padding: 0.9rem 3.2% 0.6rem;
    overflow: hidden;
    position: relative;
    .vip-status {
      font-size: 0.48rem;
      background: rgba(255, 255, 255, 0.2);
      display: inline-block;
      height: 0.76rem;
      border-radius: 0.38rem;
      line-height: 0.76rem;
      padding: 0 0.3rem;
    }
    .top-icon {
      width: 1.5rem;
      text-align: center;
      height: 1.24rem;
      line-height: 1.24rem;
      right: 3.2%;
      top: 0.8rem;
      position: absolute;

      .icon-dot {
        position: absolute;
        right: 0;
        top: 0;
        width: 0.28rem;
        height: 0.28rem;
        border-radius: 50%;
        background-color: red;
      }

      img {
        margin-top: 0.3rem;
        width: 55%;
      }
    }

    .user {
      display: flex;

      .avatar {
        height: 2rem;
        width: 2rem;
        border-radius: 50%;
        background: #dfdfdf;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        margin-left: 0.52rem;
        width: calc(100% - 3rem);

        .username {
          .name {
            font-size: 0.64rem;
            margin-right: 0.8rem;
            font-weight: bold;
          }
        }

        .other-info {
          margin-top: 0.4rem;
          font-size: 0.52rem;

          .expire {
            margin-right: 6%;
          }

          .copy {
            text-decoration: underline;
            margin-left: 3.33%;
          }
        }
      }
    }

    .account-info {
      display: flex;
      position: relative;
      justify-content: space-between;
      font-size: 0.52rem;
      margin-top: 0.5rem;
      align-items: center;

      .divider {
        position: absolute;
        height: 0.8rem;
        border-right: 0.04rem solid rgba(255, 255, 255, 0.2);
        font-size: 1rem;
        top: 0.4rem;
        left: 25%;
      }

      .d2 {
        left: 50%;
      }

      .d3 {
        left: 75%;
      }

      .info-cell {
        width: 25%;
        text-align: center;

        .number {
          font-size: 0.8rem;
          font-weight: bold;
        }

        .text {
          max-width: 1.4rem;
          margin: 0 auto;
          opacity: 0.6;
        }
      }
    }
  }

  .order {
    .title {
      height: 1.8rem;
      display: flex;
      justify-content: space-between;
      padding: 0 3.2%;
      line-height: 1.8rem;
      background-color: #fff;

      .title-text {
        color: rgba(68, 68, 68, 1);
        font-size: 0.64rem;
      }

      .title-ex-text {
        font-size: 0.48rem;
        color: rgba(178, 177, 177, 1);
      }
    }

    .order-type {
      background-color: #fff;
      display: flex;
      padding: 0.64rem 3.2%;
      justify-content: space-between;

      .order-btn {
        text-align: center;
        position: relative;

        img {
          // width: 3.125rem;
          height: 0.96rem;
        }

        .order-text {
          margin-top: 0.375rem;
          font-size: 0.56rem;
          color: rgba(68, 68, 68, 1);
        }

        .badge {
          position: absolute;
          top: -0.2rem;
          right: 0.1rem;
          width: 0.6rem;
          height: 0.6rem;
          border-radius: 50%;
          color: #fff;
          background: rgba(253, 85, 94, 1);
          border: 0.04rem solid rgba(255, 255, 255, 1);
          // line-height: 1.1875rem;
          font-size: 0.48rem;
        }
      }
    }
  }
  .score-panel {
    margin-top: 0.48rem;
    width: 100%;
    height: 3rem;
    background-image: url("../../assets/kll/jifenrenwu.png");
    background-size: 100% 100%;
    padding-left: 2.2rem;
    color: #a15b00;
    overflow: hidden;
    .score {
      font-size: 0.64rem;
      font-weight: bold;
      width: 2.4rem;
      text-align: center;
      margin-top: 0.8rem;
    }
    .text {
      font-size: 0.36rem;
      width: 2.4rem;
      text-align: center;
    }
  }
  .user-menu-list {
    margin-top: 0.48rem;
    background-color: #fff;

    .user-menu {
      padding: 0 3.2%;
      display: flex;
      justify-content: space-between;
      height: 2rem;
      line-height: 2rem;

      .menu-text {
        font-size: 0.64rem;
      }

      .icon {
        width: 0.8rem;
        background-image: url("../../assets/发视频-assets/next.png");
        background-size: 0.28rem 0.52rem;
        background-repeat: no-repeat;
        background-position: 50% 50%;
      }
    }
  }

  .logout {
    height: 2rem;
    line-height: 2rem;
    font-weight: bold;
    color: rgba(0, 120, 255, 1);
    font-size: 0.64rem;
    background: #fff;
    text-align: center;
    margin: 0.48rem 0;
  }

  .ad {
    width: 100%;
  }
}
.d-flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.flex-1 {
  flex: 1;
}
</style>
